// 滚动条处理逻辑
import {message} from "antd";
import {ReactDOM, useState} from "react";
import  'React'
import {findDOMNode} from "react-dom";

type ModelProps = {
  total: number,
  pageSize: number,
  pageNum: number,
  setPageNum: () => void,
  scrollRef: any,
}

function useLoadingTable (props: ModelProps) {
  const {setPageNum, pageSize, pageNum, total, scrollRef} = props;
  const [loading, setLoading] = useState<boolean>();
  const totalPages = total / pageSize;
  // 获取表格dom元素
  const tableBody = scrollRef;
  // const tableBody = scrollRef?.querySelector('.ant-table-body');

  // 容器可视区高度
  const tableBodyHeight: number = tableBody?.clientHeight ? tableBody?.clientHeight : 0;

  // 内容高度
  const contentHeight = tableBody?.scrollHeight ? tableBody?.scrollHeight : 0;

  // 距离顶部的高度
  const toTopHeight = tableBody?.scrollTop ? tableBody?.scrollTop : 0;
  const onAutoLoading = async () => {
    if (loading) return;

    // 如果后端数据总条数小于50 或者后端数据条数等于当前页面展示的总条数并且滚动条没有出现，不需要再去调用后端去请求数据
    // if ((dataSource.length === total && toTopHeight === 0) || total <= 50) {
    //   return;
    // }

    // 如果是横向滚动条变化，则不触发后续接口调用
    // if (tableScrollLeft !== tableBody?.scrollLeft) {
    //   setTableScrollLeft(tableBody?.scrollLeft ? tableBody?.scrollLeft : 0);
    //   return;
    // }
    console.log(contentHeight);
    console.log(toTopHeight);
    console.log(contentHeight);
    // 当距离底部只有1时，重新获取数据
    if (contentHeight - (toTopHeight + tableBodyHeight) <= 1) {
      // 如果当前页数据大于等于总页数，则代表没有数据了
      if (pageNum >= totalPages) {
        message.success('已经是最后一页了', 2);
        return;
      }
      setLoading(true)

      // 让滚动条重回顶部
      // resetToTopHeight();
      setPageNum();
      setLoading(false)
    }
  }
  // const onScrollEvent = () => {
  //   // 如果正在加载数据中，不重复进行操作
  //   autoLoadingTable();
  // }

  // return (
  //   <div onScrollCapture={onScrollEvent}>
  //     <Table
  //       columns={columns}
  //       scroll={{x: 1800, y: 480}}
  //       dataSource={dataSource}
  //       rowKey='id'
  //       loading={loading}
  //       sticky={true}
  //       ref={scrollRef}
  //     />
  //   </div>
  // )

  return {onAutoLoading};
}

export default useLoadingTable;
// 滚动条重回顶部的函数
// const resetToTopHeight = () => {
//   //console.log('滚动条重回顶部');
//   const table = ReactDOM.findDOMNode(tableScrollRef.current);
//   // 获取表格dom元素
//   const tableBody: any = (table as Element)?.querySelector('.ant-table-body');
//   // 距离顶部的高度
//   if (tableBody?.scrollTop) {
//     tableBody.scrollTop = 0;
//   }
//   //const toTopHeight = tableBody?.scrollTop ? tableBody?.scrollTop : 0;
// }
